<template>
    <div class="activity-box">
        <div
            class="activity-main"
            @click="goActivity('39')"
        >
            <div class="activity-entrance">
                <div class="activity-left">
                    <img
                        class="activity-entrance-1"
                        src="@/assets/images/activity/activity-entrance-1.png"
                        @click.stop="goActivity('39')"
                    />
                </div>
                <div class="activity-right">
                    <img
                        class="activity-entrance-2"
                        src="@/assets/images/activity/activity-entrance-2.png"
                        @click.stop="goActivity('40')"
                    />
                    <img
                        class="activity-entrance-3"
                        src="@/assets/images/activity/activity-entrance-3.png"
                        @click.stop="goActivity('41')"
                    />
                </div>
            </div>
            <img
                class="vip-entrance-img"
                src="@/assets/images/home/vip-entrance-2.png"
                @click.stop="goExperience"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: 'Activity2',
    props: ['isVip'],
    methods: {
        goExperience() {
            this.$router.push('/experience')
        },
        goActivity(value) {
            this.$router.push('/activity_1?goodsType=' + value)
        }
    }
}
</script>

<style lang="stylus" scoped>
.activity-box
    padding 0 0.33rem 0.37rem 0.33rem
    background #fff
    .activity-main
        background-image url('../../../assets/images/activity/summer-activity.png')
        background-size 100% auto
        background-repeat no-repeat
        padding 4.8rem 0.4rem 0.3rem 0.4rem
        .activity-entrance
            display flex
            justify-content space-between
            .activity-left
                width 49%
                .activity-entrance-1
                    width 100%
            .activity-right
                display flex
                flex-wrap wrap
                flex-direction column
                justify-content space-between
                width 49%
                .activity-entrance-2, .activity-entrance-3
                    width 100%
        .vip-entrance-img
            width 100%
            margin-top .3rem
</style>

